<template>
    <view class="settings-page">
        <!-- 顶部导航栏 -->
        <view class="header">
            <uni-nav-bar :border="false" backgroundColor="#ffffff" statusBar>
                <template v-slot:left>
                    <view class="nav-left" @click="goBack">
                        <uni-icons type="back" size="20"></uni-icons>
                    </view>
                </template>
                <template v-slot:default>
                    <view class="nav-center">
                        <text class="nav-title">消息通知设置</text>
                    </view>
                </template>
            </uni-nav-bar>
        </view>

        <!-- 设置内容区域 -->
        <view class="settings-content">
            <!-- 系统通知设置 -->
            <view class="settings-section">
                <view class="section-title">系统通知设置</view>
                <view class="settings-content-wrapper">
                    <view class="settings-item">
                        <text class="item-label">消息接收</text>
                        <switch :checked="messageReceive" @change="toggleMessageReceive" color="#007AFF"
                            style="transform: scale(0.7);" />
                    </view>
                </view>
                <view class="section-title">自动回复</view>
                <view class="settings-content-wrapper">
                    <view class="settings-item">
                        <text class="item-label">开启租客IM消息自动回复</text>
                        <switch :checked="tenantAutoReply" @change="toggleTenantAutoReply" color="#007AFF" style="transform: scale(0.7);" />
                    </view>
                </view>
            </view>

            <!-- 声音通知设置 -->
            <view class="settings-section">
                <view class="section-title">声音通知设置</view>
                <view class="settings-content-wrapper">
                    <view class="settings-item arrow-item" @click="navigateToSoundSettings">
                        <text class="item-label">新消息声音通知</text>
                        <view class="item-right">
                            <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>

            <!-- IM头像设置 -->
            <view class="settings-section">
                <view class="section-title">IM头像设置</view>
                <view class="settings-content-wrapper">
                    <view class="settings-item arrow-item" @click="getWechatAvatar">
                        <text class="item-label">获取微信头像</text>
                        <view class="item-right">
                            <text class="action-text">去获取</text>
                            <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 设备推送状态 -->
            <view class="settings-section">
                <view class="section-title">设备推送状态</view>
                <view class="settings-content-wrapper">
                    <view class="settings-item arrow-item">
                        <text class="item-label">设备ID</text>
                        <view class="item-right">
                            <view class="checkbox checked">
                                <uni-icons type="checkbox-filled" size="18" color="#007AFF"></uni-icons>
                            </view>
                            <text class="action-text">绑定成功</text>
                            <uni-icons type="right" size="16" color="#CCCCCC"></uni-icons>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            messageReceive: false,
            autoReply: false,
            tenantAutoReply: false
        }
    },
    methods: {
        goBack() {
            uni.navigateBack();
        },
        toggleMessageReceive(e) {
            this.messageReceive = e.detail.value;
        },
        toggleTenantAutoReply(e) {
            this.tenantAutoReply = e.detail.value;
            if (this.tenantAutoReply) {
                uni.navigateTo({
                    url: '/pages/message/auto-reply'
                });
            }
        },
        resetAutoReplyStatus() {
            // 重置自动回复开关状态
            this.tenantAutoReply = false;
        },
        navigateToSoundSettings() {
            // 导航到声音设置页面
            uni.navigateTo({
                url: '/pages/message/sound'
            });
        },
        getWechatAvatar() {
            // 获取微信头像
            uni.showToast({
                title: '获取微信头像功能开发中',
                icon: 'none'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.settings-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f5f5f5;
}

.header {
    background-color: #ffffff;
}

.nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60rpx;
    height: 60rpx;
}

.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;

    .nav-title {
        font-size: 30rpx;
        font-weight: normal;
        color: #333;
    }
}

.settings-content {
    flex: 1;
    padding: 20rpx 0;
}

.settings-section {
    margin-bottom: 20rpx;

    .section-title {
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        color: #999;
        background-color: #f5f5f5;
        margin-bottom: 2rpx; // 添加间距
    }

    .settings-content-wrapper {
        // 新增白色背景容器
        background-color: #ffffff;
        border-radius: 15rpx;
        overflow: hidden;
        margin: 0 15rpx;
    }
}



.settings-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    height: 48rpx;

    &:last-child {
        border-bottom: none;
    }
}

.item-label {
    font-size: 28rpx;
    color: #333;
}

.arrow-item {
    cursor: pointer;
}

.item-right {
    display: flex;
    align-items: center;

    .action-text {
        font-size: 28rpx;
        color: #999;
        margin-right: 10rpx;
    }
}

.checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
}
</style>